<template>
        <div class="top">
            <div class="top-left">
                <img src="" alt="">
            </div>
            <div class="top-search">
                <img src="" alt="">
                <input type="text" placeholder="苹果笔记本" class="iconfont icon-sousuo">
            </div>
            <div class="top-login">
                登录
            </div>
        </div>
</template>

<script>
export default {

}
</script>

<style scoped>
   .top {
  height: 12.26666667vw;
  background-color: #c82e29;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vw 4vw;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}
.top-left img {
  width: 5.33333333vw;
  height: 5.06666667vw;
}
.top .top-search {
  height: 8vw;
  line-height: 8vw;
  padding: 1.6vw 3.6vw;
  background-color: #fff;
  border-radius: 10.66666667vw;
  display: flex;
  box-sizing: border-box;
}
.top .top-search input {
  padding-left: 4vw;
  box-sizing: border-box;
  border: none;
  border-left: 1px solid #dddddd;
  color: #757575;
  font-size: 3.46666667vw;
  font-weight: bold;
}
.top .top-search img {
  padding-right: 2.66666667vw;
}
.top .top-login {
  color: #fff;
  font-size: 3.46666667vw;
}
</style>